<template>
  <div class="edit">
    <div class="titles">编辑构件</div>
    <div class="content">
      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="构件类型"
                      prop="type">
          <el-select v-model="ruleForm.type"
                     placeholder="请选择构件类型"
                     style="width:100%">
            <el-option v-for="item in memberType"
                       :key="item.id"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="构件编号"
                      prop="number">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>
        <el-form-item label="楼号"
                      prop="building">
          <el-input v-model="ruleForm.building"></el-input>
        </el-form-item>
        <el-form-item label="层号"
                      prop="tierNum">
          <el-input v-model="ruleForm.tierNum"></el-input>
        </el-form-item>
        <el-form-item label="关联单位"
                      prop="sourceMill">
          <el-select v-model="ruleForm.sourceMill"
                     placeholder="请选择关联单位"
                     style="width:100%">
            <el-option v-for="item in companyList"
                       :key="item.id"
                       :label="item.made_company_name"
                       :value="item.made_company_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细参数">
          <el-upload action=""
                     list-type="picture"
                     :limit="3"
                     :on-success="success"
                     name="imgFile"
                     :on-exceed="exceed"
                     :file-list='fileList'
                     :http-request="uploadFile">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="success"
                     @click="submit('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { componentListApi } from '@/services/ProjectCenter'
import { standardCodeApi } from '@/services/StandardCode'
import { UploadFileApi } from '@/services/UserPermission'
export default {
  data () {
    return {
      ruleForm: {
        project_id: "",
        type: '',
        number: '',
        building: '',
        tierNum: '',
        sourceMill: '',
        img1: '',
        img2: '',
        img3: '',
      },
      memberType: [],
      typeData: '',
      sourceMillData: '',
      rules: {
        type: [
          { required: true, message: '请选择构件类型', trigger: 'change' }
        ],
        number: [
          { required: true, message: '请输入构件编码', trigger: 'blur' }
        ],
        building: [
          { required: true, message: '请输入楼号', trigger: 'blur' }
        ],
        tierNum: [
          { required: true, message: '请输入层号', trigger: 'blur' }
        ],
        sourceMill: [
          { required: true, message: '请选择加工厂', trigger: 'change' }
        ],
      },
      fileList: [],
      companyList: [],
      imgObj: {
        imgBox: [
          {
            pic1: "",
            pic2: "",
            pic3: "",
          }
        ]
      },
      imgArr: []
    }
  },
  methods: {
    //获取构件基本信息
    getInformation () {
      componentListApi.getBaseInfo({
        params: {
          id: this.$route.query.id
        }
      }).then((res) => {
        console.log('info', res)
        this.ruleForm.type = res.data.cp_type
        this.ruleForm.number = res.data.cp_num
        this.ruleForm.building = res.data.build_no
        this.ruleForm.tierNum = res.data.floor_no
        this.ruleForm.project_id = res.data.project_id
      }).catch((error) => {
        console.log(error);
      });
    },
    //获取构件类型
    getMemberType () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'component_type'
        }
      }).then(res => {
        this.memberType = res.data.list
      })
    },
    //获取项目关联的公司
    getCompanyList () {
      componentListApi.getCompanyInfo({
        params: {
          id: this.$route.query.project_id
        }
      }).then((res) => {
        this.companyList = res.data
        for (var i = 0; i < this.companyList.length; i++) {
          this.companyList[i].made_company_id = this.companyList[i].company.rela_id
          this.companyList[i].made_company_name = this.companyList[i].company.company_name
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //获取编辑信息
    getEditInfo () {
      componentListApi.getEditInfo({
        params: {
          id: this.$route.query.id
        }
      }).then((res) => {
        this.typeData = res.data.cp_type;
        this.sourceMillData = res.data.factory;
        this.ruleForm.number = res.data.detail.cp_num;
        this.ruleForm.type = res.data.detail.cp_type;
        this.ruleForm.building = res.data.detail.bd_num;
        this.ruleForm.tierNum = res.data.detail.bd_floor;
        this.ruleForm.sourceMill = res.data.detail.factory_id;
      }).catch((error) => {
        console.log(error)
      })
    },
    //修改-提交
    submit (ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          if (this.imgArr.length == 0) {
            this.sureSubmitData()
          } else if (this.imgArr.length == 1) {
            this.imgObj.imgBox[0].pic1 = this.imgArr[0]
            this.sureSubmitData()
          } else if (this.imgArr.length == 2) {
            this.imgObj.imgBox[0].pic1 = this.imgArr[0]
            this.imgObj.imgBox[0].pic2 = this.imgArr[1]
            this.sureSubmitData()
          } else if (this.imgArr.length == 3) {
            this.imgObj.imgBox[0].pic1 = this.imgArr[0]
            this.imgObj.imgBox[0].pic2 = this.imgArr[1]
            this.imgObj.imgBox[0].pic3 = this.imgArr[2]
            this.sureSubmitData()
          }
        } else {
          return false;
        }
      });
    },
    //调用修改构件api
    sureSubmitData () {
      componentListApi.submitInfo({
        data: {
          id: this.$route.query.id,
          project_id: String(this.ruleForm.project_id),
          cp_type: this.ruleForm.type,
          cp_num: this.ruleForm.number,
          build_no: this.ruleForm.building,
          floor_no: this.ruleForm.tierNum,
          made_company_id: String(this.ruleForm.sourceMill),
          parameters: JSON.stringify(this.imgObj.imgBox)
        }
      }).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    success (res) {
      if (this.ruleForm.img1 == '') {
        this.ruleForm.img1 = res.desc;
      } else if (this.ruleForm.img2 == '') {
        this.ruleForm.img2 = res.desc;
      } else {
        this.ruleForm.img3 = res.desc;
      }
    },
    exceed (res) {
      this.$message.error('超出限制');
    },

    uploadFile (params) {
      let formData = new FormData()
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then((res) => {
        this.imgArr.push(res.data.file_name)
        // this.imgObj.imgBox.push(res.data.file_name)
      }).catch((error) => {
        console.log(error)
      })
    },

    cancel () {
      this.$router.push({ path: '/componentDetails?id=' + this.$route.query.id })
    }
  },
  created () {
    this.getInformation()
    this.getCompanyList()
  },
  mounted () {
    this.getMemberType()
    // var obj = {
    //   img: ['1', '2', '3']
    // }
    // console.log(JSON.stringify(obj))
    // this.getEditInfo();
  }
}
</script>
<style lang="scss" scoped>
body {
  overflow: visible !important;
}
.edit {
  .titles {
    font-size: 18px;
    color: #1890ff;
    padding: 20px;
  }
  .content {
    width: 550px;
    .update {
      padding-right: 10px;
      width: 100px;
      height: 100px;
    }
  }
}
</style>